<script setup lang="ts">
import { onMounted, onUnmounted, ref, unref } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";
withDefaults(
  defineProps<{
    width?: string;
    height?: string;
  }>(),
  {
    width: "100%",
    height: "98%",
  }
);

(window as any)._AMapSecurityConfig = {
  securityJsCode: "b68e770e5357e61bc663f74fee917dca",
};
// 全局AMapUI变量
const wrapRef = ref<HTMLDivElement | null>(null);
const district = ref(); // 区域掩模
const distProvince = ref(); // 区域掩模
const map = ref(); // 地图
const mapBoundsCenter = ref(); // 区域中心
const mapBoundsCenterLevel = ref(); // 区域中心
// const emits = defineEmits(['handleOpen', 'handleClose']);

const initMap = async () => {
  AMapLoader.load({
    key: "6d055920a47dac2b9b565027bc36e5ab", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    AMapUI: {
      version: "1.1",
      plugins: ["geo/DistrictExplorer"],
    },
    plugins: ["AMap.DistrictLayer", "AMap.DistrictSearch"], // 需要使用的的插件列表
  })
    .then((AMap) => {
      district.value = new AMap.DistrictSearch({
        subdistrict: 0,
        extensions: "all",
      });
      distProvince.value = new AMap.DistrictLayer.Province({
        zIndex: 10, // 设置图层层级
        zooms: [2, 15], // 设置图层显示范围
        adcode: ['500103','500104','500105','500106','500107','500108','500109','500112','500113'], // 设置行政区 adcode
        depth: 2, // 设置数据显示层级
      });
      // oneNoMapDistrictExplorer(AMap);
      // mapBoundsCenterLevel.value = 4;
      //   if (props.adCodeList && props.adCodeList.length > 1) {
      //     // 多区域
      //     initMapDistrictExplorer(AMap);
      //     mapBoundsCenterLevel.value = 4;
      //   } else if (props.adCodeList && props.adCodeList.length === 1) {
      //     // 单区域
      //     oneMapDistrictExplorer(AMap);
      //     mapBoundsCenterLevel.value = 7;
      //   } else if (props.adCodeList && props.adCodeList.length === 0) {
      //     // 没有数据
      //     oneNoMapDistrictExplorer(AMap);
      //     mapBoundsCenterLevel.value = 4;
      //   }
      oneMapDistrictExplorer(AMap);
  
      mapBoundsCenterLevel.value = 7;
      // oneNoMapDistrictExplorer(AMap);
      // mapBoundsCenterLevel.value = 4;
    })
    .catch((e) => {
      console.log(e);
    });
};
// 单个区域
const oneMapDistrictExplorer = (AMap: any) => {
  const wrapEl = unref(wrapRef);
  district.value.search("500000", (status: any, result: any) => {
    let status1 = status;
    status1;
    const bounds = result.districtList[0].boundaries;
    let bounds_center = result.districtList[0].center;
    mapBoundsCenter.value = bounds_center;
    const mask: any = [];
    for (let i = 0; i < bounds.length; i++) {
      mask.push([bounds[i]]);
    }
    map.value = new AMap.Map(wrapEl, {
      // 设置地图容器id
      mask: mask, // 为Map实例制定掩模的路径,各图层将值显示路径范围内图像,3D模式下有效
      zoom: 9.5, // 设置当前显示级别
      expandZoomRange: true, // 开启显示范围设置
      zooms: [4, 20], //最小显示级别为7，最大显示级别为20
      center: [bounds_center.lng , bounds_center.lat], // 设置地图中心点位置
      viewMode: "3D", // 特别注意,设置为3D则其他地区不显示
      zoomEnable: true, // 是否可以缩放地图
      resizeEnable: true,
      mapStyle: "amap://styles/darkblue",
      // mapStyle: 'amap://styles/9e38c523c5eae28c8b2d0431bf320928'
    });
    getDistProvince(map.value);
    // marker点击
    // markerList(AMap, map.value);
    // 添加描边
    let polyArr: any = [];
    for (let i = 0; i < bounds.length; i++) {
      polyArr.push(bounds[i]);
    }
    const polyline = new AMap.Polyline({
      path: polyArr, // polyline 路径，支持 lineString 和 MultiLineString
      strokeColor: "#ace6f9", // 线条颜色，使用16进制颜色代码赋值。默认值为#00D3FC
      strokeWeight: 3, // 轮廓线宽度,默认为:2
      strokeOpacity: 1,
      strokeStyle: "solid",
    });
    polyline.setMap(map.value);
  });
};
// 没有区域
const oneNoMapDistrictExplorer = (AMap: any) => {
  const wrapEl = unref(wrapRef);
  let adCode = 100000;
  district.value.search(adCode, (status: any, result: any) => {
    let status1 = status;
    status1;
    const bounds = result.districtList[0].boundaries;
    let bounds_center = result.districtList[0].center;
    mapBoundsCenter.value = bounds_center;
    const mask: any = [];
    for (let i = 0; i < bounds.length; i++) {
      mask.push([bounds[i]]);
    }
    map.value = new AMap.Map(wrapEl, {
      // 设置地图容器id
      mask: mask, // 为Map实例制定掩模的路径,各图层将值显示路径范围内图像,3D模式下有效
      zoom: 4, // 设置当前显示级别
      expandZoomRange: true, // 开启显示范围设置
      zooms: [4, 20], //最小显示级别为7，最大显示级别为20
      center: [bounds_center.lng - 10, bounds_center.lat], // 设置地图中心点位置
      viewMode: "3D", // 特别注意,设置为3D则其他地区不显示
      zoomEnable: true, // 是否可以缩放地图
      resizeEnable: true,
      mapStyle: "amap://styles/grey",
      // mapStyle: 'amap://styles/9e38c523c5eae28c8b2d0431bf320928'
    });
    // marker点击
    markerList();
    // markerList(AMap, map.value);
    // 添加描边
    let polyArr: any = [];
    for (let i = 0; i < bounds.length; i++) {
      polyArr.push(bounds[i]);
    }
    const polyline = new AMap.Polyline({
      path: polyArr, // polyline 路径，支持 lineString 和 MultiLineString
      strokeColor: "#ace6f9", // 线条颜色，使用16进制颜色代码赋值。默认值为#00D3FC
      strokeWeight: 3, // 轮廓线宽度,默认为:2
      strokeOpacity: 1,
      strokeStyle: "solid",
    });
    polyline.setMap(map.value);
  });
};
// 多个区域
// const initMapDistrictExplorer = async AMap => {
//   const wrapEl = unref(wrapRef);
//   let adCode = 100000;
//   district.value.search(adCode, (status, result) => {
//     let status1 = status;
//     status1;
//     const bounds = result.districtList[0].boundaries;
//     let bounds_center = result.districtList[0].center;
//     mapBoundsCenter.value = bounds_center;
//     const mask: any = [];
//     for (let i = 0; i < bounds.length; i++) {
//       mask.push([bounds[i]]);
//     }
//     map.value = new AMap.Map(wrapEl, {
//       // 设置地图容器id
//       mask: mask, // 为Map实例制定掩模的路径,各图层将值显示路径范围内图像,3D模式下有效
//       zoom: 7.5, // 设置当前显示级别
//       expandZoomRange: true, // 开启显示范围设置
//       zooms: [4, 20], //最小显示级别为7，最大显示级别为20
//       center: [bounds_center.lng, bounds_center.lat], // 设置地图中心点位置
//       viewMode: '3D', // 特别注意,设置为3D则其他地区不显示
//       zoomEnable: true, // 是否可以缩放地图
//       resizeEnable: true,
//       // mapStyle: 'amap://styles/grey',
//       mapStyle: 'amap://styles/9e38c523c5eae28c8b2d0431bf320928'
//     });
//     // 添加描边
//     let polyArr: any = [];
//     for (let i = 0; i < bounds.length; i++) {
//       polyArr.push(bounds[i]);
//     }
//     const polyline = new AMap.Polyline({
//       path: polyArr, // polyline 路径，支持 lineString 和 MultiLineString
//       strokeColor: '#ace6f9', // 线条颜色，使用16进制颜色代码赋值。默认值为#00D3FC
//       strokeWeight: 3, // 轮廓线宽度,默认为:2
//       strokeOpacity: 1,
//       strokeStyle: 'solid'
//     });
//     polyline.setMap(map.value);
//     AMapUI.loadUI(['geo/DistrictExplorer'], function(DistrictExplorer) {
//       //创建一个实例
//       let districtExplorer = new DistrictExplorer({
//         eventSupport: true,
//         map: map.value
//       });
//       function renderAreaNode(areaNode) {
//         //绘制子区域
//         districtExplorer.renderSubFeatures(areaNode, function() {
//           return {
//             cursor: 'default',
//             bubble: true,
//             strokeColor: '', //线颜色
//             strokeOpacity: 1, //线透明度
//             strokeWeight: 1, //线宽
//             fillColor: '#00BFFF', //填充色
//             fillOpacity: 0.35 //填充透明度
//           };
//         });

//         //绘制父区域
//         districtExplorer.renderParentFeature(areaNode, {
//           cursor: 'default',
//           bubble: true,
//           strokeColor: 'black', //线颜色
//           strokeOpacity: 1, //线透明度
//           strokeWeight: 1, //线宽
//           fillColor: 'gray', //填充色
//           fillOpacity: 0.2 //填充透明度
//         });
//       }
//       markerList(AMap, map.value);
//       districtExplorer.loadMultiAreaNodes(props.adCodeList, function(
//         error,
//         areaNodes
//       ) {
//         error;
//         //设置定位节点，支持鼠标位置识别
//         //注意节点的顺序，前面的高优先级
//         districtExplorer.setAreaNodesForLocating(areaNodes);

//         //清除已有的绘制内容
//         districtExplorer.clearFeaturePolygons();

//         for (var i = 0, len = areaNodes.length; i < len; i++) {
//           renderAreaNode(areaNodes[i]);
//         }
//         map.value.setFitView(districtExplorer.getAllFeaturePolygons());
//       });
//     });
//   });
// };
// 点聚合操作
const markerList = () => {
  // const markerList = (AMap, map) => {
  const markers: any = [];

  //   props.optionData.map((data: any) => {
  //     markers.push({
  //       ...data,
  //       lnglat: [data.lng, data.lat]
  //     });
  //   });
  //   const getMarkerIcon = level => {
  //     if (level === 2) {
  //       return centrumYellow;
  //     } else if (level === 3) {
  //       return centrumRed;
  //     } else {
  //       return centrumGreen;
  //     }
  //   };
  //   const cluster = new AMap.MarkerCluster(map, markers, {
  //     maxZoom: 10,
  //     renderMarker(ctx) {
  //       let { marker, data } = ctx;
  //       let iconItem, iconItemBj;
  //       switch (data[0].maxLevelWarnName) {
  //         case '黄色':
  //           iconItem = centrumYellow;
  //           iconItemBj = `<div class="MarkerBjYellow MarkerBj">${data[0].structName}</div>`;
  //           break;
  //         case '红色':
  //           iconItem = centrumRed;
  //           iconItemBj = `<div class="MarkerBjRed MarkerBj">${data[0].structName}</div>`;
  //           break;
  //         case '绿色':
  //           iconItem = centrumGreen;
  //           iconItemBj = `<div class="MarkerBjGreen MarkerBj">${data[0].structName}</div>`;
  //           break;
  //         default:
  //           iconItem = centrumGreen;
  //           iconItemBj = `<div class="MarkerBjGreen MarkerBj">${data[0].structName}</div>`;
  //           break;
  //       }
  //       let startIcon = new AMap.Icon({
  //         // 图标尺寸
  //         size: new AMap.Size(20, 30),
  //         // 图标的取图地址
  //         image: iconItem
  //       });
  //       marker.setIcon(startIcon);
  //       marker.on('click', () => {
  //         cockpitStore.setBridgeId(data[0].structId);
  //       });
  //       marker.on('mouseover', () => {
  //         marker.setLabel({
  //           offset: new AMap.Pixel(0, 0),
  //           direction: 'right',
  //           content: iconItemBj
  //         });
  //       });
  //       marker.on('mouseout', () => {
  //         marker.setLabel({
  //           offset: new AMap.Pixel(0, 0),
  //           content: ''
  //         });
  //       });
  //       // 给map添加zoomend事件,当缩放级别时触发
  //       map.on('zoomend', () => {
  //         // 关闭信息窗体
  //         //emits('handleClose');
  //       });
  //       map.on('mousedown', () => {
  //         // 关闭信息窗体
  //         // emits('handleClose');
  //       });
  //     },
  //     renderClusterMarker(context) {
  //       var clusterCount = context.count;
  //       let maxLevel = 0;
  //       let title = `${context.count}个设施`;
  //       // var div = document.createElement('div');
  //       // div.style.color = 'red';
  //       // 聚合中点个数
  //       (context.clusterData || []).forEach(val => {
  //         title = `${val.structName}等${context.count}个设施`;
  //         val._amapMarker.originData.forEach(or => {
  //           or.forEach(ori => {
  //             if (ori.maxLevelWarn) {
  //               maxLevel = Math.max(maxLevel, Number(ori.maxLevelWarn));
  //             }
  //           });
  //         });
  //       });
  //       var size = Math.round(
  //         25 + Math.pow(clusterCount / markers.length, 1 / 5) * 10
  //       );
  //       context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
  //       context.marker
  //         .setContent(`<div class="ClusterMarker" style="width:40px; height: 68.4px;">
  //             <div class="count count-right count-${maxLevel}" >${
  //         context.count
  //       }</div>
  //             <img src="${getMarkerIcon(
  //               maxLevel
  //             )}" alt="" style="width: 21.6px; height:28.8px;">
  //             </div>`);
  //       context.marker.setTitle(title);
  //     }
  //   });
  //   cluster.on('click', item => {
  //     //此处是通过包含点的数量判断是否是聚合点，不是聚合点就执行上方单个点的点击方式
  //     if (item.clusterData.length <= 1) {
  //       return;
  //     }
  //     //这里是计算所有聚合点的中心点
  //     let allLng = 0,
  //       allLat = 0;
  //     for (const mo of item.clusterData) {
  //       allLng += Number(mo.lng);
  //       allLat += Number(mo.lat);
  //     }
  //     const lat = allLat / item.clusterData.length;
  //     const lng = allLng / item.clusterData.length;
  //     mapTo(map.getZoom() + 2, [lng, lat]);
  //   });
};

// 地图平移
// const mapTo = (level, lngLat) => {
//   map.value.setZoomAndCenter(level, lngLat);
// };
const getDistProvince = (AMap: any) => {
  distProvince.value.setStyles({
    "stroke-width": 2, // 设置描边颜色
    fill: function () {
      // 设置区域填充颜色，可根据回调信息返回区域信息设置不同填充色
      // 回调返回区域信息数据，字段包括 SOC(国家代码)、NAME_ENG(英文名称)、NAME_CHN(中文名称)等
      // 国家代码名称说明参考 https://a.amap.com/jsapi_demos/static/demo-center/js/soc-list.json
      return "rgba(10,119,177,0.4)";
    },
  });
  // distProvince.value.setMap(AMap);
  AMap.add(distProvince.value)
};
onMounted(() => {
  initMap();
});
onUnmounted(() => {
  map.value?.destroy();
});
</script>
<template>
  <div ref="wrapRef" class="wrapRef" :style="{ height, width }"></div>
</template>

<style lang="less">
.wrapRef {
  .amap-logo {
    display: none !important;
  }

  .amap-copyright {
    opacity: 0;
  }
}
.wrapRef {
  background-color: transparent !important;
  background-image: none;
}
</style>
